<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="default" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="搜索条件" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入查询条件"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="default" @click="handleQuery">搜索</el-button>
        <el-button size="default" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          size="default"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          size="default"
          :disabled="multiple"
          @click="handleDeleteSelect"
        >删除</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="suppliersList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="列11" align="center" prop="id" />
      <el-table-column label="列22" align="center" prop="productId" />
      <el-table-column label="列33" align="center" prop="name" />
      <el-table-column label="操作66" align="center" class-name="default-padding fixed-width">
        <template #default="scope">
          <el-button
            type="text"
            @click="handleBind(scope.row)"
          >绑定</el-button>
          <el-button
            type="text"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-show="total>0"
      background
      layout="prev, pager, next, total"
      :total="total"
    />

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="属性1" prop="productId">
          <el-input type="text"  v-model="form.productId" placeholder="请输入属性1" />
        </el-form-item>
        <el-form-item label="属性2" prop="name">
          <el-input v-model="form.name" placeholder="请输入属性2" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

const suppliersList = ref([
  { id: 1, productId: 'P001', name: '属性1' },
  { id: 2, productId: 'P002', name: '属性2' },
  { id: 3, productId: 'P003', name: '属性3' },
  { id: 4, productId: 'P004', name: '属性4' },
  { id: 5, productId: 'P005', name: '属性5' }
]);
const total = ref(5);
const queryParams = reactive({
  name: '',
  pageNum: 1,
  pageSize: 10
});
const form = reactive({
  productId: '1',
  name: '1'
});
const rules = reactive({
  productId: [
    { required: true, message: '请输入ID', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入属性名称', trigger: 'blur' }
  ]
});
const title = ref('');
const open = ref(false);
const loading = ref(false);
const single = ref(true);
const multiple = ref(true);
const showSearch = ref(true);

const selectItem = reactive({})

// 方法
const handleQuery = () => {
  getList();
};

const resetQuery = () => {
  queryParams.productId = '';
  queryParams.name = '';
  queryParams.pageNum = 1;
  queryParams.pageSize = 10;
  getList();
};

const handleAdd = () => {
  form.productId = '';
  form.name = '';
  open.value = true;
  title.value = '新增属性';
};

const handleUpdate = (row) => {
  form.productId = row.productId;
  form.name = row.name;
  open.value = true;
  title.value = '修改属性';
};

const handleDelete = (row) => {
  console.log('删除数据', row);
};
const handleDeleteSelect = () => {
  console.log('删除选中数据', selectItem.value);
}


const handleBind = (row) => {
  console.log('绑定', row);
};

const submitForm = () => {
  // 验证表单逻辑
  console.log('提交表单', form);
};

const cancel = () => {
  form.productId = '';
  form.name = '';
  open.value = false;
};

const getList = () => {
  console.log('获取数据列表', queryParams);
};

const handleSelectionChange = (val) => {
  selectItem.value = val;
  console.log('选中项', selectItem.value)
  multiple.value = val.length < 1;
  single.value = val.length === 1;
};
getList();
</script>
